<template>
  <div>
    <div class="equipment">
      <div class="equipment-title">
        <div>{{ DeviceInfo.DeviceId }}</div>
        <div
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          "
        >
          <el-button
            type=""
            size="mini"
            @click="req"
            v-if="!DeviceInfo.ControllerFlag"
          >
            申请控制
          </el-button>
          <el-button
            type="success"
            size="mini"
            @click="DeviceFreeRequest1"
            v-else-if="DeviceInfo.ControllerIP == '解除控制'"
          >
            解除控制
          </el-button>
          <el-button type="success" size="mini" v-else>
            {{ DeviceInfo.ControllerIP }}
          </el-button>
          <div style="margin-left: 10px"></div>
          <template
            v-if="
              DeviceInfo.ControllerFlag && DeviceInfo.ControllerIP == '解除控制'
            "
          >
            <i class="green"></i>
          </template>
          <template v-else>
            <i class="grey"></i>
          </template>
        </div>
      </div>
      <div class="equipment-content">
        <!-- <div class="equipment-name">{{ DeviceInfo.DeviceId }}</div> -->
        <el-row :gutter="20" justify="space-between">
          <el-col :span="24">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
              "
            >
              <div class="equipment-state" style="flex: 1">
                <div class="label">取放料准备状态</div>
                <template v-if="DeviceInfo.TakeState != '未就绪'">
                  <i class="green"></i>
                </template>
                <template v-else>
                  <i class="grey"></i>
                </template>
              </div>
              <div
                style="
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: end;
                "
              >
                <el-button
                  size="small"
                  disabled
                  type="primary"
                  :disabled="!DeviceInfo.ControllerFlag"
                  @click="click1"
                >
                  取放料准备
                </el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
              "
            >
              <div class="equipment-state" style="flex: 1">
                <div class="label">零件编号：{{ DeviceInfo.PartId }}</div>
                <i class="green"></i>
              </div>
              <div
                style="
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: end;
                "
              >
                <el-button
                  size="small"
                  type="primary"
                  @click="work"
                  :disabled="!DeviceInfo.ControllerFlag"
                >
                  加工
                </el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
              "
            >
              <div class="equipment-state" style="flex: 1">
                <div class="label">运行状态</div>
                <template v-if="DeviceInfo.RunningState == '运行'">
                  <i class="green"></i>
                </template>
                <template v-else>
                  <i class="grey"></i>
                </template>
              </div>
              <div
                style="
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: end;
                "
              ></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible"
      title="加工"
      width="50%"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="NC文件">
          <!-- <el-input v-model="form.NcPath" :rows="2" type="text" /> -->
          <input type="file" @change="getBase64" />
          <!-- <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :file-list="fileList"
            :limit="1"
            upload
            :before-upload="handleUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload> -->
        </el-form-item>
        <!-- <el-form-item label="操作者">
          <el-input v-model="form.Creator" :rows="2" type="text" />
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker v-model="form.CreateTime" type="date" label="请选择操作时间" placeholder="请选择操作时间"
            style="width: 100%" />
        </el-form-item> -->
      </el-form>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit6">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    DeviceCmdExec,
    DeviceUseRequest,
    DeviceMachineCmdExec,
    DeviceFreeRequest,
  } from '@/api/index'

  export default {
    props: {
      DeviceInfo: {
        type: Object,
        default: {
          DeviceId: '',
          Classify: '',
          RunningState: '',
          OfflineState: '',
        },
      },
    },
    data() {
      return {
        DeviceId: '',
        DeviceBasicInfo: [],
        DeviceRealtimeInfo: {},
        dialogVisible: false,
        options: [],
        form: {},
        FileName: '',
        FileContent: '',
      }
    },
    methods: {
      getBase64(e) {
        let t = this
        let file = e.target.files[0]
        t.FileName = file.name
        // 判断文件是否读取完毕，读取完毕后执行
        if (window.FileReader) {
          let reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = function (e) {
            let base64String = e.target.result
            // 此处可对该base64进行获取赋值传入后端
            console.log('bese64编码：', base64String)
            t.FileContent = base64String
          }
        }
      },
      DeviceFreeRequest1() {
        console.log('DeviceFreeRequest1')
        let params = { DeviceId: this.DeviceInfo.DeviceId }
        DeviceFreeRequest(params).then((res) => {
          if (res.Message == 'Success') {
            this.$emit('fetch-data')
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      click1() {
        let params = { DeviceId: this.DeviceInfo.DeviceId }
        DeviceCmdExec(params).then((res) => {
          if (res.Message == 'Success') {
            this.$emit('fetch-data')
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      click2() {},
      req() {
        let params = { DeviceId: this.DeviceInfo.DeviceId }
        DeviceUseRequest(params).then((res) => {
          if (res.Message == 'Success') {
            this.$emit('fetch-data')
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      work() {
        this.dialogVisible = true
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleClose2() {
        this.dialogVisible2 = false
      },
      submit() {},
      submit1() {},
      submit2() {
        this.dialogVisible2 = true
      },
      submit6() {
        let params = {
          DeviceId: this.DeviceInfo.DeviceId,
          FileName: this.FileName,
          FileContent: this.FileContent,
        }
        DeviceMachineCmdExec(params).then((res) => {
          if (res.Message == 'Success') {
            this.$emit('fetch-data')
            this.dialogVisible = false
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      handleClose() {
        this.dialogVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #89c6ff;
  }
  .equipment {
    border-radius: 10px;
    box-shadow: 0px 2px 15px rgba(231, 231, 231, 0.7);
    margin-bottom: 30px;

    &-title {
      display: block;
      width: 100%;
      // height: 38px;
      color: #fff;
      text-align: center;
      line-height: 38px;
      background-color: #2f54eb;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }

    &-content {
      padding: 20px 15px;
    }

    &-name {
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    &-state {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      // margin-top: 10px;
    }

    .grey {
      background-color: #cccccc;
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 50%;
      flex: none;
    }

    .green {
      flex: none;
      background-color: #07c160;
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 50%;
    }

    .label {
      // width: 100px;
    }
  }
</style>
